<template>
  <div class="book-admin-dashboard">
      <el-container>
        <el-aside width="200px">
          <el-menu :default-active="activeMenu" @select="handleMenuSelect">
            <el-menu-item index="borrowAnalysis">借阅分析</el-menu-item>
            <el-menu-item index="borrowManagement">借阅管理</el-menu-item>
            <el-menu-item index="bookManagement">图书管理</el-menu-item>
            <el-menu-item index="userManagement">用户管理</el-menu-item>
            <el-menu-item index="homeManagement">主页管理</el-menu-item>
            <el-menu-item index="bookTypeManagement">图书类型管理</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <component :is="currentComponent" />
        </el-main>
      </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import UserManagement from '../components/UserManagement.vue';
import BookManagement from "../components/BookManagement.vue";
import BorrowManagement from "../components/BorrowManagement.vue";
import BorrowAnalysis from "../components/BorrowAnalysis.vue";
import HomeManagement from "../components/HomeManagement.vue";
import BookTypeManagement from "../components/BookTypeManagement.vue";



// 使用对象映射组件
const components = {
  userManagement: UserManagement,
  bookManagement: BookManagement,
  borrowManagement: BorrowManagement,
  borrowAnalysis: BorrowAnalysis,
  homeManagement: HomeManagement,
  bookTypeManagement: BookTypeManagement
};

// 当前菜单和动态组件
const activeMenu = ref('bookManagement');
const currentComponent = ref(components.bookManagement);

// 菜单切换事件
const handleMenuSelect = (menu) => {
  currentComponent.value = components[menu];
};

</script>

<style scoped>
.book-admin-dashboard {
  display: flex;
  height: 100vh;
}
</style>
